<template>
  <BasicModal
    @register="registerModal"
    :width="popModalFixedWidth"
    :dialogStyle="{ top: '70px' }"
    :bodyStyle="popBodyStyle"
    :footer="modalFooter"
    cancelText="关闭"
    class="jeecg-online-pop-modal"
    @ok="handleSubmit"
  >
    <template #title>
      {{ title }}
      <j-modal-tip v-if="showTopTip" :open="topTipVisible" @save="handleSaveData" @cancel="handleRecover" />
    </template>
    <online-pop-form
      ref="onlineFormCompRef"
      :id="id"
      :disabled="disableSubmit"
      :formTemplate="formTemplate"
      :isTree="isTreeForm"
      :pidField="pidFieldName"
      :request="request"
      :isVxeTableData="isVxeTableData"
      @rendered="renderSuccess"
      @success="handleSuccess"
      @dataChange="handleDataChange"
      modalClass="jeecg-online-pop-modal"
    />
  </BasicModal>
</template>
<script lang="ts">
  import { watch, defineComponent, computed, h } from 'vue';
  import { Button } from 'ant-design-vue';
  import { BasicModal } from '/@/components/Modal';
  import OnlinePopForm from './OnlinePopForm.vue';
  import JModalTip from '../../extend/linkTable/JModalTip.vue';
  import { useAutoModal } from '../../use/useAutoForm';

  export default defineComponent({
    name: 'OnlinePopModal',
    components: {
      BasicModal,
      OnlinePopForm,
      JModalTip,
      Button,
    },
    props: {
      id: {
        type: String,
        default: '',
      },
      showFields: {
        type: Array,
        default: () => [],
      },
      hideFields: {
        type: Array,
        default: () => [],
      },
      topTip: {
        type: Boolean,
        default: false,
      },
      request: {
        type: Boolean,
        default: true,
      },
      saveClose: {
        type: Boolean,
        default: false,
      },
      isVxeTableData: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['success', 'register', 'formConfig'],
    setup(props, { emit }) {
      console.log('进入表单弹框》》》》modal');
      const {
        title,
        registerModal,
        cgButtonList,
        handleCgButtonClick,
        disableSubmit,
        handleSubmit,
        submitLoading,
        handleCancel,
        handleFormConfig,
        onlineFormCompRef,
        formTemplate,
        isTreeForm,
        pidFieldName,
        renderSuccess,
        formRendered,
        handleSuccess,
        topTipVisible,
        successThenClose,
        isUpdate,
        popBodyStyle,
        popModalFixedWidth,
        getFormStatus,
      } = useAutoModal(false, { emit });
      watch(() => props.id, renderFormItems, { immediate: true });
      async function renderFormItems() {
        formRendered.value = false;
        if (!props.id) {
          return;
        }
        console.log('重新渲染表单》》》》modal props.id=', props.id);
        await handleFormConfig(props.id, {});
      }
      function handleSaveData() {
        if (props.saveClose === false) {
          successThenClose.value = false;
        }
        handleSubmit();
      }
      function handleRecover() {
        topTipVisible.value = false;
        onlineFormCompRef.value.recoverFormData();
      }
      function handleDataChange() {
        topTipVisible.value = true;
      }
      const showTopTip = computed(() => {
        if (!isUpdate.value) {
          return false;
        }
        return props.topTip;
      });
      const modalFooter = computed(() => {
        if (isUpdate.value == true) {
          return null;
        } else {
          const flag = submitLoading.value;
          const defaultFooter = [
            h(Button, { type: 'primary', loading: flag, onClick: handleSubmit }, () => '确定'),
            h(Button, { onClick: handleCancel }, () => '关闭'),
          ];
          return defaultFooter;
        }
      });
      const that = {
        title,
        topTipVisible,
        handleSaveData,
        handleRecover,
        onlineFormCompRef,
        renderSuccess,
        registerModal,
        handleSubmit,
        handleSuccess,
        handleCancel,
        formTemplate,
        disableSubmit,
        cgButtonList,
        handleCgButtonClick,
        isTreeForm,
        pidFieldName,
        submitLoading,
        handleDataChange,
        isUpdate,
        showTopTip,
        modalFooter,
        popBodyStyle,
        popModalFixedWidth,
        getFormStatus,
      };
      return that;
    },
  });
</script>
<style scoped></style>
